<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="#">学校信息管理</a>
				<a>
					<cite>教室管理</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="x-body" id="app">
			<xblock class="layui-form">
				<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
				<button class="layui-btn" onclick="open_addClassroom()"><i class="layui-icon"></i>增加</button>
				<div class="layui-input-inline">
					<select lay-filter="selectBuildName">
						<option value="0">选择教学楼</option>
						<option v-for="buildName in buildNames" :value="buildName">{{ buildName }}</option>
					</select>
				</div>
				<span class="x-right" style="line-height:40px">共有数据：{{ pageInfo.total }} 条，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</span>
				<form id="import_excel_form" enctype="multipart/form-data">
                    <input type="file" hidden="hidden" name="excelFile" id="importInput" onchange="import_excel(this)" accept=".xlsx"/>
                </form>
			</xblock>
			<table class="layui-table">
				<thead>
					<tr>
						<th width="20">
							<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
						</th>
						<th>教室名称</th>
						<th>教学楼</th>
						<th width="150">教室号</th>
						<th width="150">操作</th>
				</thead>
				<tbody>
					<tr v-for="schRoom in schRooms">
						<td>
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary" :data-id="schRoom.roomId" :data-roomName="schRoom.roomName" :data-buildName="schRoom.buildName" :data-roomNumber="schRoom.roomNumber"><i class="layui-icon">&#xe605;</i></div>
						</td>
						<td>{{ schRoom.roomName }}</td>
						<td>{{ schRoom.buildName }}</td>
						<td>{{ schRoom.roomNumber }}</td>
						<td class="td-manage">
							<button class="layui-btn layui-btn layui-btn-sm" onclick="open_editClassroom(this)"><i class="layui-icon">&#xe642;</i>编辑</button>
							<button class="layui-btn-danger layui-btn layui-btn-sm" onclick="member_del(this,'要删除的id')" href="javascript:;"><i
								 class="layui-icon">&#xe640;</i>删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="page" style="margin-top: 10px !important;">
               <div>
                 <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
                 <a class="first pageTxt" href="javascript:void(0)">首页</a>
                 <template v-for="pageNum in pageInfo.navigatepageNums">
                     <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
                     <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
                 </template>
                 <a class="last pageTxt" href="javascript:void(0)">尾页</a>
                 <a class="next pageTxt" href="javascript:void(0)">下一页</a>
               </div>
             </div>
		</div>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
		<script type="text/javascript" src="/js/vue.min.js"></script>
        <script type="text/javascript" src="/js/jquery.form.js"></script>
		<script>
		
			var vm = new Vue({
	            el : '#app',
	            data : {
	            	buildNames : "",
	                pageInfo:"",
	                schRooms:"",
	                // 当前选中的教学楼
	                buildName:"0"
	            },
	            created : function() {
	                // 获取学校教学楼列表
	                this.listBuildName();
	                // 获取学校教室(0:全部)
	                this.listSchRoom("0", 1);
	            },
	            methods : {
	                listBuildName : function() {
	                    var vm = this;
	                    $.ajax({
	                        url : "/sys/school/room/listBuildName",
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                            	vm.buildNames = result.data;
	                            } else {
	                                layui.use(['layer'], function(){
	                                    var layer = layui.layer;
	                                    layer.msg(""+result.msg, {icon: 5});
	                                });
	                            }
	                        }
	                    });
	                },
	                listSchRoom(buildName, pageNum) {
	                    var vm = this;
	                    $.ajax({
	                        url : "/sys/school/room/listSchRoom",
	                        data:{
	                        	buildName:buildName,
	                            pageNum:pageNum
	                        },
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                                vm.pageInfo = result.data;
	                                vm.schRooms = result.data.list;
	                            } else {
	                                layui.use(['layer'], function(){
	                                    var layer = layui.layer
	                                    layer.msg(""+result.msg, {icon: 5});
	                                });
	                            }
	                        }
	                    });
	                }
	            }
	        });
		
			// 点击页码数，进行跳转
            $(".page").delegate(".num", "click", function() {
                var pageNum = $(this).attr("data");
                vm.listSchRoom(vm.buildName, pageNum);
            });
            // 上一页
            $(".page").delegate(".prev", "click", function() {
                if (vm.pageInfo.hasPreviousPage) {
                    vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum - 1);
                }
            });
            // 下一页
            $(".page").delegate(".next", "click", function() {
                if (vm.pageInfo.hasNextPage) {
                    vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum + 1);
                }
            });
            // 首页
            $(".page").delegate(".first", "click", function() {
                if (!vm.pageInfo.isFirstPage) {
                    vm.listSchRoom(vm.buildName, 1);
                }
            });
            // 尾页
            $(".page").delegate(".last", "click", function() {
                if (!vm.pageInfo.isLastPage) {
                    vm.listSchRoom(vm.buildName, vm.pageInfo.pages);
                }
            });
            // select监听
            layui.use('form', function(){
          	   var form = layui.form;
          	   form.on('select(selectBuildName)', function(data){
          		    vm.listSchRoom(data.value, 1);
          	        vm.buildName = data.value;
               });
        	  });
			
			// 添加教室
			function open_addClassroom() {
				layer.open({
					type: 1, //Page层类型
					btn: ["确定", "取消"],
					title: '添加教室',
					skin: 'layui-layer-prompt',
					content: "<input type='text' class='layui-layer-input' placeholder='教学楼，2-15个字符'><br><input type='text' class='layui-layer-input' placeholder='教室号，2-10个字符'>",
					yes: function(index, layero) {
						// 按钮【按钮一】的回调
						var buildName = $(layero).find("input[type='text']:eq(0)").val();
						var roomNumber = $(layero).find("input[type='text']:eq(1)").val();
						// 数据检验
						var reg_buildName = /^[\S]{2,15}$/;
						var reg_roomNumber = /^[\S]{2,10}$/;
						if (!reg_buildName.test(buildName)) {
							layer.msg('教学楼2-15个字符，且不能出现空格', {
								icon: 5,
								time: 1000
							});
							return;
						} else if (!reg_roomNumber.test(roomNumber)) {
							layer.msg('教室号2-10个字符，且不能出现空格', {
								icon: 5,
								time: 1000
							});
							return;
						}
						// 保存
						$.ajax({
							url: "/sys/school/room/saveSchRoom",
							data: {
								buildName: buildName,
								roomNumber: roomNumber
							},
							type: "post",
							success: function(result) {
								if (result.state) {
									layer.msg("添加成功", {
										icon: 1
									});
									vm.listSchRoom(vm.buildName, vm.pageInfo.pages);
									// 关闭
									layer.close(index);
								} else {
									layer.msg("" + result.msg, {
										icon: 5
									});
								}
							}
						});
					}
				})
			}

			// 编辑教室
			function open_editClassroom(obj) {
				var roomId = $(obj).parents("tr").find("div:first").attr("data-id");
				var buildName = $(obj).parents("tr").find("div:first").attr("data-buildName");
				var roomNumber = $(obj).parents("tr").find("div:first").attr("data-roomNumber");
				layer.open({
					type: 1, //Page层类型
					btn: ["确定", "取消"],
					title: '编辑教室',
					skin: 'layui-layer-prompt',
					content: "<input type='text' class='layui-layer-input' value='"+buildName+"' placeholder='教学楼，2-15个字符'><br><input type='text' class='layui-layer-input' value='"+roomNumber+"' placeholder='教室号，2-10个字符'>",
					yes: function(index, layero) {
						// 按钮【按钮一】的回调
						var buildName = $(layero).find("input[type='text']:eq(0)").val();
						var roomNumber = $(layero).find("input[type='text']:eq(1)").val();
						// 数据检验
						var reg_buildName = /^[\S]{2,15}$/;
						var reg_roomNumber = /^[\S]{2,10}$/;
						if (!reg_buildName.test(buildName)) {
							layer.msg('教学楼2-15个字符，且不能出现空格', {
								icon: 5,
								time: 1000
							});
							return;
						} else if (!reg_roomNumber.test(roomNumber)) {
							layer.msg('教室号2-10个字符，且不能出现空格', {
								icon: 5,
								time: 1000
							});
							return;
						}
						// 更新
						$.ajax({
							url: "/sys/school/room/updateSchRoom",
							data: {
								roomId : roomId,
								buildName: buildName,
                                roomNumber: roomNumber
							},
							type: "post",
							success: function(result) {
								if (result.state) {
									layer.msg("编辑成功", {
										icon: 1
									});
									vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum);
									// 关闭
									layer.close(index);
								} else {
									layer.msg("" + result.msg, {
										icon: 5
									});
								}
							}
						});
					}
				})
			}

			// 单个删除
			function member_del(obj) {
				var roomName = $(obj).parents("tr").find("div:first").attr("data-roomName");
				var id = $(obj).parents("tr").find("div:first").attr("data-id");
				var roomId = [];
				roomId.push(id);
				layer.confirm('确认要删除【' + roomName + '】吗？', function(index) {
					$.ajax({
						url: "/sys/school/room/delSchRoom",
						type: "post",
						data: {
							roomId: roomId
						},
						success: function(result) {
							if (result.state) {
								layer.msg('删除成功!', {
									icon: 1,
									time: 1000
								});

								// 根据当前页面数据量决定加载前一页还是当前页
								if (vm.pageInfo.size - 1 == 0 && vm.pageInfo.pageNum != 1) {
									vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum - 1);
								} else {
									vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum);
								}
							} else {
								layer.msg("" + result.msg, {
									icon: 5
								});
							}
						}
					});
				});
			}

			// 批量删除
			function delAll(argument) {
				var roomId = tableCheck.getData();
				if (roomId.length <= 0) {
					return;
				}
				// 获取选中的专业名称
				var obj = $(".layui-form-checked").not('.header');
				var roomName = [];
				obj.each(function(index, el) {
					roomName.push(obj.eq(index).attr('data-roomName'));
				});
				layer.confirm('确认要删除【' + roomName + '】吗？', function(index) {
					$.ajax({
						url: "/sys/school/room/delSchRoom",
						type: "post",
						data: {
							roomId: roomId
						},
						success: function(result) {
							if (result.state) {
								layer.msg('删除成功', {
									icon: 1
								});
								// 移除所有checkbox的勾选状态
								$(".layui-form-checkbox").removeClass('layui-form-checked');
								// 根据当前页面数据量决定加载前一页还是当前页
								if (vm.pageInfo.size - roomId.length == 0 && vm.pageInfo.pageNum != 1) {
									vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum - 1);
								} else {
									vm.listSchRoom(vm.buildName, vm.pageInfo.pageNum);
								}
							} else {
								layer.msg("" + result.msg, {
									icon: 5
								});
							}
						}
					});
				});
			}
			
			
			// 触发input文件上传
            function open_inputFile() {
                $("#importInput").click();
            }
            
            // 导入数据(excel格式)
            function import_excel(obj) {
                var file = $(obj).val();
                // 当所选文件不为空时
                if (file.length != 0) {
                    $("#import_excel_form").ajaxSubmit({
                            type:'post',
                            url:'/sys/school/room/importSchRoom',
                            success:function(result){
                                if (result.state) {
                                    layer.msg("导入数据成功", {icon: 1},function(){
                                        // 刷新页面
                                        location.reload();
                                    });
                                } else {
                                    layer.msg(""+result.msg, {icon: 5});
                                }
                                // 重置input中的文件
                                document.getElementById("import_excel_form").reset();
                            }
                    });
                }
            }
		</script>
	</body>

</html>
